<template>
  <div>
     <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
    >
     <van-cell v-for="(item,index) in list" :key="index">
         <van-card class="test">
          <template #desc>
            <div class="box"> 
                  <div class="left">
                <div class="imgbox">
              <img :src="item.poster" alt=""> 
                </div>
                <div class="m_l10">
                  <div class="namebox">
                   <p>{{item.name}}</p> 
                    <span>{{item.filmType.name}}</span>
                  </div>

                  <div class="item">主演:<template v-for="tem in item.actors">{{tem.name}}&nbsp;</template></div>
                  <div class="item">上映时间：{{ toWMD(item.premiereAt)}}</div>
                </div>
              </div>
              <div class="right">
                <van-button size="mini" plain hairline type="primary" color="#ffb232">预约</van-button>
              </div>
            </div>
          </template>
        </van-card>    
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import tiem from '../utils/tiem'
export default {
    data(){
        return{
            list:[],
            loading:false,
            finished:false,
           
        }
    },
    methods:{
         ...tiem
    },
    mounted(){
      this.$http.get('soon',{params:{cityId:this.$store.state.city.cityId}}).then(res=>{
      console.log(res);
        this.list = res.data.films
       
      })
    }
 
}
</script>


<style scoped>
  .test{
    background-color: #fff;
  }

  /* 
    在这里重置样式不一定生效
    1. 样式的优先级问题  (样式的层级一定要一样)
    2. 因为这里是局部样式,也可能会造成不生效的原因
    就要写app.vue中style中,
    或者把当前的stylede scoped属性去掉,(谨慎)

    tip: 能加class改的就加class改, 优先使用组件提供的属性去修改
  */
  .van-cell{
    padding: 0;
  }
  .van-card__content{
    min-height: 0;
  }

  .box{
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    min-height: 100px;
  }
  .left{
    display: flex;
  }
  .imgbox{
    width: 66px;
    height: 92px;
    overflow: hidden;
  }
  .imgbox img{
    width: 100%;
  }
 .m_l10{
  margin-top: 15px;
 }

  .right{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .namebox{
    display: flex;
    align-items: center;
  }
  .namebox p{
    font-size: 16px;
  }
  .namebox span{
    height: 15px;
    display: inline-block;
    line-height: 15px;
    padding: 2px;
    background-color: #d2d6dc;
    color: #fff;
    font-size: 12px;
    transform: scale(0.8);
    border-radius: 2px;
    margin-left: 3px;
  }

  .item{
    font-size: 13px;
    color: #797d82;
     width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .item .grade{
    color: #ffb232;
    font-size: 14px;
    font-style: italic;
  }
</style>